{% extends 'base.html' %}

{% block body %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
        <div class="row">
        <form action="" method="post" class="add-article-form" enctype="multipart/form-data">
          <div class="col-md-9">
            <h1 class="page-header">撰写新文章</h1>
            <div class="form-group">
              <label for="article-title" class="sr-only">标题</label>
              <input type="text" id="article-title" name="title" class="form-control" placeholder="在此处输入标题" required autofocus autocomplete="off">
            </div>
            <div class="form-group">
              <label class="sr-only">内容</label>
              <div id="editor" name=“content”>
                <p>输入文章内容</p>
              </div>
            <textarea name="content" id="intro" cols="30" rows="10" hidden></textarea>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>关键字</span></h2>
              <div class="add-article-box-content">
                <input type="text" class="form-control" placeholder="请输入关键字" name="keywords" autocomplete="off">
                <span class="prompt-text">多个标签请用英文逗号,隔开。</span>
              </div>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>描述</span></h2>
              <div class="add-article-box-content">
                <textarea class="form-control" name="describe" autocomplete="off"></textarea>
                <span class="prompt-text">描述是可选的手工创建的内容总结，并可以在网页描述中使用</span>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <h1 class="page-header">操作</h1>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>栏目</span></h2>
              <div class="add-article-box-content">
                <ul class="category-list">
                  {% for cgy in data %}
                  <li>
                    <label>
                      <input name="category_id" type="radio" value="{{ cgy.category_id }}">
                      {{ cgy.name }} <em class="hidden-md">( 栏目ID: <span>{{ cgy.category_id }}</span> )</em></label>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>标签</span></h2>
              <div class="add-article-box-content">
                <input type="text" class="form-control" placeholder="输入新标签" name="tags" autocomplete="off">
                <span class="prompt-text">多个标签请用英文逗号,隔开</span> </div>
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>标题图片</span></h2>
              <div class="add-article-box-content">
                <input type="file"  name="titlepic">
              </div>
<!--              <div class="add-article-box-footer">-->
<!--                <button class="btn btn-default" type="button" ID="upImage">选择</button>-->
<!--              </div>-->
            </div>
            <div class="add-article-box">
              <h2 class="add-article-box-title"><span>发布</span></h2>
              <div class="add-article-box-content">
                <p><label>状态：</label><span class="article-status-display">未发布</span></p>
                <p><label>公开度：</label><input type="radio" name="visibility" value="0" checked/>公开 <input type="radio" name="visibility" value="1" />加密</p>
                <p><label>发布于：</label><span class="article-time-display"><input style="border: none;" type="datetime" name="time" value="2016-01-09 17:29:37" /></span></p>
              </div>
              <div class="add-article-box-footer">
                <button class="btn btn-primary" type="submit" name="submit">发布</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
{% endblock %}
{% block js %}
<script src="/static/lib/ueditor/ueditor.config.js"></script>
<script src="/static/lib/ueditor/ueditor.all.min.js"> </script>
<script src="/static/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src='//unpkg.com/wangeditor/release/wangEditor.min.js'></script>
   <script>
        $(function (){
            var E = window.wangEditor
            var editor = new E('#editor')
            var $text1 = $('#intro')
            editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        }
            editor.customConfig.uploadImgShowBase64 = true
            editor.create()
            $text1.val(editor.txt.html())
        })
   </script>
<script>
    var preview = document.querySelector('#preview');
    var eleFile = document.querySelector('#file');
    eleFile.addEventListener('change', function() {
        var file = this.files[0];
        // 确认选择的文件是图片
        if(file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                // 图片base64化
                var newUrl = this.result;
                preview.src =  newUrl;
            };
        }
    });
</script>
{% endblock %}